<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>sl-ui</title>
  </head>
  <body>
	<div id="app"></div>
	<script src="./dist/sl-ui.js"></script>


	<!-- <div id="app">
		<sl-grid
			:height="'-20px'"
			:width="'100%'"
			:cols="cols"
			:title="'列表标题'"
			:table-data="'/Api/grid/getData'"
			:post-data="2"
			:show-refresh="true"
			:show-title="true"
			:show-page="true"
			:page-size="50"
			:page-list="[50, 100, 300, 500]"
			:sort-mode="'all'"
			:remote-sort="false"
      :auto-load="true"
		>
			<template slot="button">
				<sl-button text="添加" @click="test"></sl-button>
				<sl-button text="删除" ></sl-button>
				<sl-button text="更多">
					<dd onclick="alert('下载')">下载</dd>
					<dd onclick="alert('导出')">导出</dd>
				</sl-button>
			</template>
			<template slot="headHtml">
				<p>你好</p>
			</template>
			<template slot="cols">
				<cell title="用户" align="center" >
					<cell title="用户编码" name="user_code" align="center" width="100" sortable="true"></cell>
					<cell title="用户名称"  name="user_name" align="center" width="140" sortable="true"></cell>
				</cell>
				<cell title="主键" name="log_id" align="center" width="100" sortable="true" total="true"></cell>
				<cell title="请求" align="center" >
					<cell title="状态" name="state" align="center" width="100" sortable="true"></cell>
					<cell title="参数" name="param" align="center" width="100" sortable="true"></cell>
				</cell>
				<cell title="时间" name="create_time" align="center" minWidth="150" fixed="true"></cell>
				<cell title="路由" name="url" align="center" width="100" fixed="true"></cell>
			</template>
		</sl-grid>
	</div>

  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./dist/sl-ui.js"></script>

	<script>
		 new Vue({
			 el: '#app',
			 data() {
				 return {
					cols: [
						{
							title: "用户",name: "", align: "center", width: "100", sortable: true,
							cols:[
								{title: "用户编码",  name: "user_code", align: "left", width: "100", total: false},
								{title: "用户名称",  name: "user_name", align: "left", width: "140", total: false},
							]
						},
						{
							type:"number",title: "主键",  name: "log_id", align: "left", width: "100", total: true,isEdit:true,
							max:100
						},
						{title: "请求",  name: "", align: "center", width: "", total: true,
							cols:[
								{title: "状态",  name: "state", align: "right", width: "120", total: true},
								{title: "参数",  name: "param", align: "left", width: "120", total: false}
							]
						},
						{title: "时间", name: "create_time", align: "right", minWidth:"150",sortable:false,fixed:"right"},
						{title: "路由", name: "url", align: "left", width:"150",sortable:true,fixed:"right"}
					],
					tableData:[]
				 }
			},
			mounted() {
        this.test();
			},
			methods: {
				test(){
					let data=[];
					for (var i = 0; i <300; i++) {
					  data.push({age:21,log_id:i+1,sex:"男",name1:"sdsd"+i,name2:"qazxsw",name3:"s3"})
					}
					data.push({age:"01",log_id:i+1,sex:"女",name1:"adsd"+i,name2:"bazxsw",name3:"s3"})
					this.tableData = data;
				}
			},
			watch: {

			}
		})
	</script> -->

	</body>
</html>
